<template>
	<div class="hello">
		<el-container>
			<el-header style="padding-left:35%;margin-top:100px">
				<img src="@/assets/hospital2.png" style="height:80px;" />
				<img src="@/assets/txt.png" style="height:80px;" />
				 <!-- <router-link to="/help" style="padding-right:50%;margin-top:100px">就诊流程帮助</router-link> -->
			</el-header>
			<el-main style="margin-bottom:90px">
				<el-form :model="userForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
					style="padding-top:40px;
           padding-right:30px;
           padding-bottom:30px;
           margin-top:30px; 
           width: 40%; 
           margin-left:30%; 
           border-radius: 4px; 
           box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
		   <el-form-item >
		   
		  <router-link to="/help" style="padding-right:20%">就诊流程帮助</router-link>
<!-- 		  
		   <router-link to="/reset_password">重置密码-找回密码子界面</router-link>|			
		   <router-link to="/retrieve_password">找回密码</router-link>| -->
		   </el-form-item>
					<el-form-item label="账号" prop="account">
						<el-input v-model="userForm.account" placeholder="请输入账号" clearable></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="userForm.password" placeholder="请牢记密码" show-password></el-input>
					</el-form-item>
					<el-form-item label="用户类型" prop="type">
						<el-select v-model="userForm.type" placeholder="未选择" style="width: 100%">
							<el-option label="患者" value="1"></el-option>
							<el-option label="门诊医生" value="2"></el-option>
							<el-option label="医技医生" value="3"></el-option>
							<el-option label="系统管理员" value="4"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item style="padding-right:10%">
						<el-button type="primary" style="width:30%" icon="el-icon-s-promotion"
							@click="login('ruleForm')">登录</el-button>
					</el-form-item>
<!-- 					<el-form-item label="未布局" prop="account">
					<router-link to="/change_password">修改密码</router-link>		
					<router-link to="</retrieve_password>">忘记密码？</router-link>
					</el-form-item> -->
					<el-form-item >
						<el-col :span="14" style="padding-right:30%">
							 <router-link to="/enroll">注册</router-link>		
						</el-col>
						<el-col :span="8">
							<router-link to="/change_password">修改密码</router-link>
							
						</el-col>
					</el-form-item>
				</el-form>
			</el-main>
			<el-footer>HIS门诊管理系统</el-footer>
		</el-container>
	</div>
</template>

<script>
	import {
		showMsgTitle
	} from '@/utils/api2'
	import {
		showMsgConfirm
	} from '@/utils/api2'
	import {
		getRequest
	} from '@/utils/api2'
	import {
		postRequest
	} from '@/utils/api2'
	import axios from 'axios';
	export default {
		name: "HelloWorld",
		data() {
			return {
				userForm: {
					account: '',
					type:"",
					password: ''
				},
				rules: {
					account: [{
						required: true,
						message: '用户名不能为空！',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择用户类型！',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '密码不能为空！',
						trigger: 'blur'
					}]
				},
				b:false
			};
		},
		methods: {
			login: function(Form) {
					if (this.userForm.type=="") {
						this.$message({
							showClose: true,
							message: '请选择用户类型',
							type: 'warn'
						});
					}else if (this.userForm.type=="1") {
						let url = "/queryPatient";						
						getRequest(url).then(resp => {
								for (var i = 0; i < resp.data.length; i++) {
									if (this.userForm.account == resp.data[i].tel 
									&& this.userForm.password == resp.data[i].password) {
										this.b=true;
										
										this.$router.push({
											path: '/registration',
											query: {
												type: this.userForm.type,
												user:resp.data[i]
											},
											replace: true
										});
									}
								}						
							if(this.b==false){
							this.$message({
								showClose: true,
								message: '账号或密码错误',
								type: 'warn'
							});
						}
						})
						 
						
					} else if (this.userForm.type=="2") {

						let url = "/queryDoctor";
						getRequest(url).then(resp => {
								for (var i = 0; i < resp.data.length; i++) {
									if (this.userForm.account == resp.data[i].account 
									&& this.userForm.password == resp.data[i].password) {
										this.b=true;
										
										this.$router.push({
											path: '/home',
											query: {
												type: this.userForm.type
											},
											replace: true
										});
									}
								}						
							if(this.b==false){
							this.$message({
								showClose: true,
								message: '账号或密码错误',
								type: 'warn'
							});
						}
						})
					}else if (this.userForm.type=="3") {

						let url = "/queryPatient";
						getRequest(url).then(resp => {
								for (var i = 0; i < resp.data.length; i++) {
									if (this.userForm.account == resp.data[i].tel 
									&& this.userForm.password == resp.data[i].password) {
										this.b=true;
										
										this.$router.push({
											path: '/home',
											query: {
												type: this.userForm.type,
												
											},
											replace: true
										});
									}
								}						
							if(this.b==false){
							this.$message({
								showClose: true,
								message: '账号或密码错误',
								type: 'warn'
							});
						}
						})
					} else if (this.userForm.type=="4") {

						let url = "/queryPatient";
						getRequest(url).then(resp => {
								for (var i = 0; i < resp.data.length; i++) {
									if (this.userForm.account == 'admin' 
									&& this.userForm.password == 'admin') {
										this.b=true;
										
										this.$router.push({
											path: '/home',
											query: {
												type: this.userForm.type
											},
											replace: true
										});
									}
								}						
							if(this.b==false){
							this.$message({
								showClose: true,
								message: '账号或密码错误',
								type: 'warn'
							});
						}
						})
					}  


			},

		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#hello {
		height: 600px;
	}

	.el-header {
		color: #333;
		text-align: left;
		line-height: 100px;
	}

	.el-footer {
		background-color: darkgrey;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-main {
		color: #333;
		text-align: center;
		line-height: 460px;
	}
</style>
